<template>
  <div class="common-table">
    <el-table
      v-bind="otherOptions"
      :class="className"
      :data="tableData"
      :height="height"
      :header-cell-class-name="headerCellClassName"
      :row-class-name="tableRowClassName"
      :row-key="rowKey"
      :align="align"
      stripe
      highlight-current-row
      :tree-props="treeProps"
      @selection-change="selectChange"
      @current-change="currentChange"
      @row-click="rowClick"
      ref="commonTable"
    >
      <el-table-column
        type="selection"
        label-class-name="select-all"
        v-if="showSelectAll"
      />
      <el-table-column type="index" label="序号" v-if="showIndex" />
      <!-- v-bind="item" -->

      <el-table-column
        v-for="(item, index) in tableColumn"
        :key="index"
        :type="item.type"
        :fixed="item.fixed"
        :label="item.label"
        :prop="item.prop"
        :sortable="item.sortable"
        :align="item.align || 'center'"
        :width="item.width || ''"
        :min-width="item.minWidth"
        :column-key="item.columnKey"
        :filters="item.filters"
        :class-name="item.className"
        :show-overflow-tooltip="item.showOverflowTooltip || true"
      >
        <!-- :render-header="item.renderHeader" -->
        <!-- :sort-method="item.sortMethod" -->
        <!-- :filter-method="item.filterMethod" -->
        <!-- 需要自定义的列 -->
        <template v-if="item.formatter" v-slot="scope">
          <slot :name="item.prop" :scope="scope" />
        </template>
      </el-table-column>
    </el-table>
    <div v-if="showPagination" class="common-page-block">
      <pagination
        :total="total || 0"
        :page.sync="queryObj.pageNum"
        :limit.sync="queryObj.pageSize"
        :pagerCount="clientType === 'PC' ? 7 : 4"
        isThree
        @pagination="pagination"
      />
    </div>
  </div>
</template>
<script>
import Pagination from "@/components/Pagination/index";
import { valueLoading, noData, getCookie } from "@/utils/hsj";
export default {
  name: "MyTableComponent",
  props: {
    // 其他表格属性，参考文档
    otherOptions: Object,
    // 是否需要启用多个表格
    muilty: Boolean,
    className: {
      default: "common-table",
      type: String,
    },
    loading: {
      default: false,
      type: Boolean,
    },
    // 数据条数
    total: {
      default: 0,
      type: Number,
    },
    // 查询条件
    queryObj: {
      default: () => {
        return {
          pageSize: 10,
          pageNum: 1,
        };
      },
      type: Object,
    },
    // 是否展示序号
    showIndex: {
      default: true,
      type: Boolean,
    },
    // 对齐方式
    align: {
      default: "left",
      type: String,
    },
    // 是否显示全选
    showSelectAll: {
      default: false,
      type: Boolean,
    },
    // 是否展示分页
    showPagination: {
      default: false,
      type: Boolean,
    },
    // 表格数据
    tableData: {
      default: () => [],
      type: Array,
    },
    // 表格列
    tableColumn: {
      default: () => [],
      type: Array,
    },
    size: String,
    width: [String, Number],
    height: [String, Number],
    maxHeight: [String, Number],
    fit: {
      type: Boolean,
      default: true,
    },
    rowKey: [String, Function],
    context: {},
    showHeader: {
      type: Boolean,
      default: true,
    },
    setCurrentRow: [Object, String, Function],
    rowStyle: [Object, Function],
    cellClassName: [String, Function],
    cellStyle: [Object, Function],
    headerRowClassName: [String, Function],
    headerRowStyle: [Object, Function],
    headerCellClassName: [String, Function],
    headerCellStyle: [Object, Function],
    highlightCurrentRow: Boolean,
    currentRowKey: [String, Number],
    selectOnIndeterminate: {
      type: Boolean,
      default: true,
    },
    indent: {
      type: Number,
      default: 16,
    },
    treeProps: {
      type: Object,
      default() {
        return {
          hasChildren: "hasChildren",
          children: "children",
        };
      },
    },
    lazy: Boolean,
    load: Function,
  },
  data() {
    const clientType = getCookie("clientType") || "PC";
    return {
      clientType,
      selectRow: "",
    };
  },
  watch: {
    setCurrentRow: {
      handler(val) {
        this.selectRow = val;
        this.$refs.commonTable.setCurrentRow(val);
      },
    },
    loading: {
      handler(val) {
        const className = this.muilty ? "." + this.className : ".common-table";
        if (val === true) {
          valueLoading(
            className,
            ["#fff", "rgba(2,13,49,1)"],
            ["loading-black.gif", "loading.gif"],
            "show"
          );
        } else {
          valueLoading(
            className,
            ["#fff", "rgba(2,13,49,1)"],
            ["loading-black.gif", "loading.gif"],
            "false"
          );
        }
      },
    },
    tableData: {
      handler(val) {
        const className = this.muilty ? "." + this.className : ".common-table";
        if (val.length === 0) {
          noData(
            "" + className + " .el-table__body-wrapper",
            20,
            false,
            "",
            1000
          );
        } else {
          $(className).find(".no-data-mask").remove();
        }
      },
    },
  },
  components: {
    Pagination,
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.$initNiceScroll(".el-table__body-wrapper");
    // });
  },
  methods: {
    tableRowClassName({ row }) {
      if (row === this.selectRow) return "selected";
      return "";
    },
    pagination(val) {
      this.$emit("pagination", val);
      this.$nextTick(() => {
        $(".el-pagination__total").click(); // pad 上切换页码 页码高亮两个
      });
    },
    selectChange() {
      this.$emit("select-change");
    },
    currentChange(scope) {
      this.$emit("current-change", scope);
    },
    rowClick(row) {
      this.$emit("row-click", row);
    },
  },
};
</script>
<style lang="scss">
.common-table {
  .el-scrollbar {
    > .el-scrollbar__bar {
      opacity: 1 !important;
    }
  }
}
</style>
<style lang="scss" scoped>
.common-table {
  width: 100%;
  display: flex;
  flex-direction: column;
  ::v-deep {
    .el-table {
      height: 100% !important;
    }
    .pagination-container {
      padding: 11rem 0 0;
      text-align: center;
      .el-pagination__sizes {
        height: auto;
      }

      ::v-deep .el-pagination {
        .btn-prev,
        .btn-next,
        .el-pager li {
          margin: 0;
          min-width: 0;
        }
        .el-pagination__sizes,
        .el-pagination__jump,
        .el-pagination__editor {
          height: auto;
        }
        span,
        div {
          vertical-align: middle;
        }
      }
    }
    .el-pagination.is-background {
      .btn-next,
      .btn-prev,
      .el-pager li {
        background-color: transparent !important;
        padding: 0 5rem;
        &.active {
          color: #409eff;
        }
      }
    }
  }
}
.dark-theme {
  .pagination-container {
    background-color: transparent;
    ::v-deep span,
    div {
      color: #cee8ff;
    }
    .number,
    ::v-deep .el-icon-more,
    ::v-deep button,
    ::v-deep .btn-quicknext,
    ::v-deep .btn-quickprev {
      background-color: transparent;
      color: #a5baff;
    }
    ::v-deep.el-input__inner {
      background-color: transparent;
      border-color: #0981e4;
      color: #a5baff;
    }
  }
}
</style>